<template>
  <div class="box">
    <h2>数据库统计量</h2>
    <el-table :data="this.label" style="width: 49%;height: 85%;display: inline-block;border-radius: 10px;" :cell-style="{ textAlign: 'center' }" class="tableBox"
      row-class-name="rowTableItem" header-row-class-name="headerTableItem" :header-cell-style="{background:'rgba(11, 11, 11,0.5)',color:'white'}">
      <el-table-column prop="nodeType" label="节点类型" />
      <el-table-column prop="nodeCount" label="数量" />
    </el-table>

    <el-table :data="this.rel" style="width: 49%;height: 85%; display: inline-block; left: 5px;border-radius: 10px;" :cell-style="{ textAlign: 'center' }" class="tableBox"
      row-class-name="rowTableItem" header-row-class-name="headerTableItem" :header-cell-style="{background:'rgba(11, 11, 11,0.5)',color:'white'}">
      <el-table-column prop="edgeType" label="关系类型" />
      <el-table-column prop="edgeCount" label="数量" />
    </el-table>

  </div>
</template>

<script>
import api from "@/api";
import { defineComponent, reactive } from "vue";
// import data from './frontend/public/static/data.json'
var Data = require("/public/static/data.json");
console.log(Data);

export default defineComponent({
  data(){
    return{
      label:[],
      rel:[]
    };
  },
  mounted(){
   this.rel_and_count();
   this.label_and_count();
  },
  methods:{
  async label_and_count(){
    try {
      const label_type = await api.post('/label_and_count');
      this.label = label_type;
      console.log('label_type:',this.label);
      // Handle the API response as needed
    } catch (error) {
      console.error('Error:', error);
      // Handle the error
    }

  },
  async rel_and_count(){
    try {
      const rel_type = await api.post('/rel_and_count');
      this.rel= rel_type;
      console.log('rel_type:',this.rel);
      // Handle the API response as needed
    } catch (error) {
      console.error('Error:', error);
      // Handle the error
    }

  }

  },
  setup() {
    const state = reactive({
      data: Data
    })
    return { state }
  }
})
</script>

<style lang="less">
.box {
  width: 100%;
  height: 100%;

  .rowTableItem{
    background: rgba(11, 11, 11, 0.5);
    color: white;
  }

tbody :hover{
    color: red !important;
}
 }
</style>
